<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="GetTemplates.co" />

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />
    <meta name = "format-detection" content = "telephone=no">

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/bootstrap.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/magnific-popup.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.theme.default.min.css">
    <!-- Theme style  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/style.css">
    <!-- jquery-spinner -->
    <%--<link rel="stylesheet" href="/${ctx}assets/global/plugins/jquery-spinner/css/jquery.spinner.css" />--%>
    <!-- Modernizr JS -->
    <script src="${ctx}/assets/layouts/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
</head>
<style>
    .gtco-container {
        margin-top: -1em;
    }
    .spinner {
        float: left;
    }
    .price-label {
        float: left;
        padding-left: 20px;
        margin-top: 3px;
    }
    .price-div {
        padding-left: 10%;
        height: 40px;
    }
    .way {
        margin-top: 15px;
    }
    .way-option {
        background-color: black;
    }
    .way-option:hover {
        background-color: red!important;
    }
    .sign-detail {
        border: 1px dotted white;
        padding: 10px 10px 10px 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .detail-title {
        float: left;
        margin-bottom: 10px;
        color: #FAB448!important;
    }
    .error {
        color: red!important;
    }
</style>
<body>
<div id="page1">
    <header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(${ctx}/assets/layouts/images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-12 col-md-offset-0 text-left">
                    <div class="row row-mt-15em" style="margin-top: 3em;">
                        <div class="col-md-7 mt-text animate-box" style="margin-bottom: 1em;" data-animate-effect="fadeInUp">
                            <span class="intro-text-small">Start a wonderful <label style="color: #fbb448">journey</label></span>
                            <h1 class="cursive-font" style="font-size: 30px!important;">开启一段美妙的旅程</h1>
                        </div>
                        <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                            <div class="form-wrap">
                                <div class="tab">

                                    <div class="tab-content">
                                        <div class="tab-content-inner active" data-content="signup">
                                            <div id="error-message" style="color: red;margin-bottom: 10px;"></div>
                                            <h3 class="cursive-font" style="font-size: 22px;">填写报名信息</h3>
                                            <form id="sign-form" action="#">
                                                <c:forEach items="${data.userDetails}" var="userDetail">
                                                    <c:if test="${userDetail.number != 0}">
                                                        <c:choose>
                                                            <c:when test="${fn:contains(userDetail.name, '儿童') == true }">
                                                                <c:forEach begin="0" end="${userDetail.number - 1}" varStatus="varStatus">
                                                                    <%@ include file="./childForm.jsp" %>
                                                                </c:forEach>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <c:forEach begin="0" end="${userDetail.number - 1}" varStatus="varStatus">
                                                                    <%@ include file="./adultForm.jsp" %>
                                                                </c:forEach>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </c:if>
                                                </c:forEach>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <a style="color: white!important;" href="javascript:;" id="submit_register" onclick="sign()" class="btn btn-primary btn-block">提交报名并付款</a>
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <a href="javascript:window.location.href='${ctx}/app/login';" id="back_login">返回</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>

<script src="${ctx}/assets/layouts/js/jquery.min.js"></script>
<script src="${ctx}/assets/layouts/js/jquery.waypoints.min.js"></script>
<script src="${ctx}/assets/layouts/js/moment.min.js"></script>
<script src="${ctx}/assets/layouts/js/owl.carousel.min.js"></script>
<script src="${ctx}/assets/layouts/js/main.js"></script>
<script src="${ctx}/assets/pages/scripts/app.js"></script>
<script src="${ctx}/assets/global/plugins/jquery-validation/js/jquery.validate.js" type="text/javascript"></script>
<script src="${ctx}/assets/pages/scripts/md5.js"></script>
<script>
    $(function () {
        // 验证身份证号格式
        jQuery.validator.addMethod("isCard", function(value,element) {
            if(!/^\d{17}(\d|x)$/i.test(value));
            var card_format = /^\d{17}(\d|x)$/i;
            return this.optional(element) || card_format.test(value);

        }, "身份证号格式不正确");

        $("#sign-form").validate();
    })

    // 提交报名信息付款
    function sign() {

        var check = $("#sign-form").validate().form();
        if (!check) {
            return;
        }

        var data = new Array();
        var orderPrice = 0;
        $('.sign-detail').each(function () {
            orderPrice += parseInt($(this).attr('data-price'));
        });
        $('.sign-detail').each(function () {
            var typeId = $(this).attr('data-id');
            var typeName = $(this).attr('data-name');
            var typePrice = $(this).attr('data-price');
            var name = $(this).find('.name').val();
            var gender = $(this).find('.gender:checked').val();
            var phone = $(this).find('.phone').val();
            var card = $(this).find('.card').val();
            var address = $(this).find('.address').val();
            data.push({
                productId: '${data.productId}',
                typeId: typeId,
                typeName: typeName,
                typePrice: typePrice,
                orderPrice: orderPrice,
                name: name,
                gender: gender,
                phone: phone,
                card: card,
                address: address
            });


        });
        console.log(data);

      ajaxPostWithJson("${ctx}/app/sign_pay", data, function (signModel) {
            if (signModel.hasError) {
                $("#error-message").html("报名失败，请稍后重试");
            } else {
                // 建行支付
//                alert("建行支付");
                toCCBPay(signModel.payModel);
//                window.location.href = getURL(signModel.payModel);
            }
        },function (msg) {
            $("#error-message").html("报名失败，请您稍后重试");
        });
    }

    function getURL(payModel) {
        var tmp ='MERCHANTID='+payModel.merchantid+'&POSID='+payModel.posid+'&BRANCHID='+payModel.branchid+'&ORDERID='+payModel.orderid+'&PAYMENT='+payModel.payment+'&CURCODE='+payModel.curcode+'&TXCODE='+payModel.txcode+'&REMARK1=&REMARK2=';
        var temp_New=tmp+'&TYPE='+payModel.type+'&PUB='+payModel.pub+'&GATEWAY='+payModel.gateway+'&CLIENTIP='+'&REGINFO='+'&PROINFO='+'&REFERER=';
        var temp_New1=tmp+'&TYPE='+payModel.type+'&GATEWAY='+payModel.gateway+'&CLIENTIP='+'&REGINFO='+'&PROINFO='+'&REFERER=';
        var strMD5 = hex_md5(temp_New);
//        var CCBUrl = payModel.ccburl + temp_New1 + '&MAC=' + strMD5;
        var CCBUrl = temp_New1 + '&MAC=' + strMD5;
        return CCBUrl;
    }

    function toCCBPay(payModel) {
        var u = navigator.userAgent.toLowerCase(), app = navigator.appVersion;
        var isAndroid = u.indexOf('android') > -1 || u.indexOf('linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+mac os x/); //ios终端
        if (isiOS ==false){
            isiOS = u.indexOf('iphone')>-1; //ios终端
        }
        if (isiOS ==false){
            isiOS = u.indexOf('ipad')>-1; //ios终端
        }
        console.log("u:" + u);
        console.log("app:" + app);
        console.log("isAndroid:" + isAndroid);
        console.log("isiOS:" + isiOS);
//        $('#address').attr('value', "isAndroid:" + isAndroid +";isiOS:" + isiOS);
        var baseUrl = getURL(payModel);
        var url;
        if (isiOS){
            window.location ="mbspay://direct?" + baseUrl;
        } else{
            mbspay.directpay(baseUrl);
//            window.location.href = getURL(payModel);
        }

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga')
    }

</script>
</body>
</html>

